<template>
  <!--<v-card>
    <v-card-title>
      &lt;!&ndash;<v-btn color="primary" @click="addBrand">新增品牌</v-btn>&ndash;&gt;
      &lt;!&ndash;搜索框，与search属性关联&ndash;&gt;
      <v-spacer/>
      <v-flex xs3>
        <v-text-field label="输入用户名、昵称、手机号、注册时间搜索" v-model.lazy="search" append-icon="search" hide-details/>
      </v-flex>
    </v-card-title>
    <v-divider/>
    <v-data-table
      :headers="headers"
      :items="users"
      :pagination.sync="pagination"
      :total-items="totalBrands"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.name }}</td>
        <td class="text-xs-center">
          <img v-if="props.item.image" :src="props.item.image" width="130" height="40">
          <span v-else>无</span>
        </td>
        <td class="text-xs-center">{{ props.item.letter }}</td>
        <td class="justify-center layout px-0">
          <v-btn icon @click="editBrand(props.item)">
            <i class="el-icon-edit"/>
          </v-btn>
          <v-btn icon @click="deleteBrand(props.item)">
            <i class="el-icon-delete"/>
          </v-btn>
        </td>
      </template>
    </v-data-table>
    &lt;!&ndash;弹出的对话框&ndash;&gt;
    <v-dialog max-width="500" v-model="show" persistent scrollable>
      <v-card>
        &lt;!&ndash;对话框的标题&ndash;&gt;
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>{{isEdit ? '修改' : '新增'}}品牌</v-toolbar-title>
          <v-spacer/>
          &lt;!&ndash;关闭窗口的按钮&ndash;&gt;
          <v-btn icon @click="closeWindow"><v-icon>close</v-icon></v-btn>
        </v-toolbar>
        &lt;!&ndash;对话框的内容，表单&ndash;&gt;
        <v-card-text class="px-5" style="height:400px">
          <brand-form @close="closeWindow" :oldBrand="oldBrand" :isEdit="isEdit"/>
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-card>-->

  <!--用户信息展示列表-->

<!--//用户名、昵称、手机号-->
  <!--用户信息展示列表-->
  <table border="2px" width="90%" height="50%">
    <tr>
      <td colspan="11">
        用户名<input type="text" v-model="userVo.username">
        手机号 <input type="text" v-model="userVo.phone">
        昵称 <input type="text" v-model="userVo.nickname">
        注册时间 <input type="date" v-model="userVo.registrationtime">-<input type="date" v-model="userVo.logintime">
        <button @click="likeUser(userVo)">模糊搜索</button>
      </td>
    </tr>
    <tr align="center">
      <td>id</td>
      <td>用户名</td>
      <td>角色</td>
      <td>跑单员</td>
      <td>电话</td>
      <td>昵称</td>
      <td>价格</td>
      <td>状态</td>
      <td>删除用户</td>
    </tr>
    <!--用户信息渲染数据-->
    <tr  v-for="user in users">
      <td v-text="user.userid"></td>
      <td v-text="user.username"></td>
      <td v-text="user.roleid"></td>
      <td v-text="user.userdescription"></td>
      <td v-text="user.phone"></td>
      <td v-text="user.nickname"></td>
      <td v-text="user.money"></td>
      <td>
         <span v-if="user.status==false">
          <button v-on:click="jiejin(user.userid)">解禁</button>
        </span>
        <span v-if="user.status==true">
         <button v-on:click="jinzhi(user.userid)">禁止</button>
        </span>
      </td>
      <td><button v-on:click="deleteUser(user.userid)">删除</button></td>
    </tr>
  </table>

  <!-- <el-table
     :data="users"
     border
     center
     style="width: 100% ;margin-top: 20px">
     <template v-for="(header,index) in headers">
       &lt;!&ndash;<el-table-column
       :prop="header.prop"
       :label="header.label">
       </el-table-column>&ndash;&gt;
     </template>

   </el-table>-->

</template>

<script>
  // 导入自定义的表单组件
  import BrandForm from './BrandForm'

  export default {
    name: "User",
    data() {

      return {
        user:{},
        users: [], // 当前页用户数据
        userVo:{}
      }
    },

    mounted() { // 渲染后执行
      // 查询数据
      this.getDataFromServer();
    },
    /*watch: {
      pagination: { // 监视pagination属性的变化
        deep: true, // deep为true，会监视pagination的属性及属性中的对象属性变化
        handler() {
          // 变化后的回调函数，这里我们再次调用getDataFromServer即可
          this.getDataFromServer();
        }
      },
      search: { // 监视搜索字段
        handler(newValue,oldValue) {
          this.getDataFromServer();
        }
      }
    },*/
    filters:{
      formatDate(date){
        if (date!=null&&date!=""){
          var da=new Date(date);
          return da.getFullYear()+"-"+(da.getMonth()+1)+"-"+da.getDate()+"  "+da.getHours()+":"+da.getMinutes()+":"+da.getSeconds();
        }else{
          return null;
        }
      }
    },
    methods: {
      findByUser(){
        // 发起请求
        this.$http.get("http://localhost:10010/api/item/user/getAllUser?user="+this.user, {
        }).then(resp => { // 这里使用箭头函数
          this.users = resp.data;
          this.loading = false;
        })
      },
      getDataFromServer() { // 从服务的加载数的方法。
        // 发起请求
        this.$http.post("http://localhost:10010/api/item/user/getAllUser", {
        }).then(resp => { // 这里使用箭头函数
          this.users = resp.data;
          //this.totalBrands = resp.data.total;
          // 完成赋值后，把加载状态赋值为false
          this.loading = false;
        })
      },
      likeUser(userVo) {


        this.$http.post("http://localhost:10010/api/item/user/getAllUser",this.userVo).
        then(({data})=>{
          this.users = data;

        })
      },
      /*addBrand() {
        // 修改标记
        this.isEdit = false;
        // 控制弹窗可见：
        this.show = true;
        // 把oldBrand变为null
        this.oldBrand = null;
      },*/
      /*editUser(id){
        // 根据品牌信息查询商品分类
        this.$http.get("/order/editUser?" + id)
          .then(({data}) => {
            // 修改标记
            this.isEdit = true;
            // 控制弹窗可见：
            this.show = true;
            // 获取要编辑的brand
            this.oldBrand = oldBrand
            // 回显商品分类
            this.oldBrand.categories = data;
          })
      },*/
      deleteUser(userid){
        console.log(userid);
        this.$message.confirm('此操作将永久删除数据，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //this.handleDelete(this.model.id);
          this.$http.get("http://localhost:10010/api/item/user/deleteUserByUserId?userid="+userid).then(()=> {
            this.getDataFromServer();
          })
          alert("删除成功！");
        }).catch(()=>{
          this.$message.info('已取消删除');
        })
      },

      jiejin(userid){
        console.log(userid);
        this.$message.confirm('此操作将解禁，是否继续?', '提示', {
          confirmButtonText: '确定解禁',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //this.handleDelete(this.model.id);
          this.$http.get("http://localhost:10010/api/item/user/jiejin?userid="+userid).then(()=> {
            this.getDataFromServer();
          })
          alert("解禁成功！");
        }).catch(()=>{
          this.$message.info('已取消解禁');
        })
      },

      jinzhi(userid){
        console.log(userid);
        this.$message.confirm('此操作将禁止，是否继续?', '提示', {
          confirmButtonText: '确定禁止',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //this.handleDelete(this.model.id);
          this.$http.get("http://localhost:10010/api/item/user/jinzhi?userid="+userid).then(()=> {
            this.getDataFromServer();
          })
          alert("禁止成功！");
        }).catch(()=>{
          this.$message.info('已取消禁止');
        })
      },
      closeWindow(){
        // 重新加载数据
        this.getDataFromServer();
        // 关闭窗口
        this.show = false;
      }


    },
    components:{
      BrandForm
    }
  }
</script>

<style scoped>

</style>
